<template>
  <div class="content-container headmesg economicchart">
    <div class=" auto-center main">
      <chart :option="chartoption" :id="'encochart'"></chart>
      <div class="data-title">
        <span class="data-title-text">{{pagedata.name}}生产总值</span>
          <span class="data-int data-title-text"><span>{{pagedata.option}}</span>亿元</span>
      </div>
    </div>
      <!-- <chart :option="chartoption" :id="'encochart'"></chart> -->
  </div>
</template>

<script>
import axios from "@/assets/api/axios";
import ECharts from "vue-echarts/components/ECharts.vue";
import chart from "@/components/chart";
import ChartoOption from "@/assets/api/chart";

export default {
  data: function() {
    return {
      pagedata: null,
      chartoption: null,
      scale: 1,
      rich: {
        white: {
          color: "#fff",
          align: "left",
          fontSize: 18 * 1,
          padding: [0, 0]
        }
      },
      bgImg:
        "",
      fillImg:
        "",
      bgData: [],
      itemData: [],
      chartData: []
    };
  },
  created: function() {
    this.getEncData();
  },
  methods: {
    getEncData() {
      var setting = {
          method: "POST",
          url: "/Earthdata/getData"
        },
        data = {
          city: "定兴县",
          handel: "econ"
        };
      axios(
        res => {
          if (res.stutas === 200) {
            let data = res.data[0];
            this.pagedata = this.setPeoData(data);
            this.setOption(data);
          }
        },
        { setting, data }
      );
    },
    setPeoData (data) {
      return {
            option: data.GDP,
            name: data.eqtname,
            chart: {
              list: [data.FST_INDUSTRY, data.SND_INDUSTRY, data.TRD_INDUSTRY]
            }
          };
    },
    setOption(data) {
      let that = this;
      this.chartData = [
        {
          name: "第一产业",
          value: data.FST_INDUSTRY
        },
        {
          name: "第二产业",
          value: data.SND_INDUSTRY
        },
        {
          name: "第三产业",
          value: data.TRD_INDUSTRY
        }
      ];
      // 取出每一条数据value,作为显示数据
      this.chartData.forEach(function(items, index) {
        that.itemData.push(items.value);
      });

      // 取出所有数据最大值,作为背景象形柱图数据
      this.chartData.forEach(function(items, index) {
        that.bgData.push({
          name: items.name,
          value: Math.max.apply(null, that.itemData)
        });
      });

      // 所有数据最大值
      var maxValue = Math.max.apply(null, that.itemData);
      this.chartoption = {
        // backgroundColor: "#031f2d",
        tooltip: {
          formatter: "{b} : {c}"
        },
        grid: {
          left: "3%",
          right: "6%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            data: (function(data) {
              var arr = [];
              data.forEach(function(items) {
                arr.push(items.name);
              });
              return arr;
            })(that.chartData),

            boundaryGap: ["20%", "20%"],
            splitLine: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              textStyle: {
                fontSize: 16 * this.scale,
                color: "#3fdaff"
              }
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            splitLine: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: true,
              inside: true,
              length: 10 * this.scale,
              lineStyle: {
                color: "#0b5263"
              }
            },
            axisLabel: {
              textStyle: {
                color: "#0099FF",
                fontSize: 14 * this.scale
              }
            }
          }
        ],
        series: [
          //背景
          {
            name: "bg",
            type: "pictorialBar",
            barWidth: "45%",
            // barGap: '0%',
            silent: true,
            label: {
              normal: {
                show: true,
                position: "top",
                distance: 20 * this.scale,
                formatter: function(params) {
                  var stuNum = 0;
                  that.chartData.forEach(function(value, index, array) {
                    if (params.name == value.name) {
                      stuNum = value.value;
                    }
                  });
                  return stuNum + "{white| 亿元}";
                },
                textStyle: {
                  color: "#ffc72b",
                  fontSize: 20 * this.scale
                },
                rich: this.rich
              }
            },
            symbol: "image://" + this.bgImg,
            symbolClip: false,
            symbolBoundingData: maxValue,
            symbolSize: [52, "100%"],
            data: this.bgData
          },
          {
            name: "数据",
            type: "pictorialBar",
            barWidth: "45%",
            barGap: "-100%",
            data: that.chartData,
            z: 3,
            symbol: "image://" + this.fillImg,
            symbolClip: true,
            symbolBoundingData: maxValue,
            symbolSize: [52, "100%"]
          }
        ]
      };
    }
  },
  components: {
    chart
  }
};
</script>

<style>
.data-title-text > span{
    font-size: 2rem;
    font-weight: 800;
}
.data-title{
    background-color: #fff0;
    margin: 20px auto;
    line-height: 45px;
}
.economicchart
{
  background-size: 100% 100%;
}
.main
  {
    height: calc(100% - 120px);
    width: 100%;
    transition: all 0.5s linear;
}
</style>